<template>
  <div>
    <table>
      <caption>
        欢迎光临_vue开发的收银系统的水果店
      </caption>
      <tr>
        <th>苹果10¥/斤,折扣&lt;8折&gt;</th>
      </tr>
      <tr>
        <td>
          输入你要购买的斤数
          <input type="number" v-model="num" />
        </td>
      </tr>
      <tr>
        <td>
          <button @click="add">结账买单</button>
        </td>
      </tr>
      <tr>
        <td>结账单:总价{{ sum }}¥元,折后价{{ cheap }}¥元,省了{{ count }}¥元</td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: 1,
      sum: 0,
      cheap: 0,
      count: 0,
    };
  },
  methods: {
    add() {
      this.sum = this.num * 10;
      this.cheap = this.sum * 0.8;
      this.count = this.sum - this.cheap;
    },
  },
};
</script>

<style scoped>
div {
  width: 800px;
  margin: 10px auto;
}
table {
  /* border-collapse: collapse; */
  border: solid #000 1px;
  width: 100%;
}
tr,
td {
  border: solid #000 1px;
  padding: 5px;
  text-align: center;
}
</style>